<template>
	<view>
		<view class="uni-file-picker">
			<uni-section title="点击拍照" type="line">
				<view class="uni-file-picker__container" style="margin-left: 2%;">
					<view class="file-picker__box" v-for="(item,index) in imageList" :key="index">
						<view class="file-picker__box-content">
							<image class="file-image" :src="item.img" mode="aspectFill"
								@click.stop="prviewImage(item,index)">
							</image>
							<view class="icon-del-box" @click.stop="delFile(index)">
								<view class="icon-del"></view>
								<view class="icon-del rotate"></view>
							</view>
						</view>
					</view>
					<view class="file-picker__box">
						<view class="file-picker__box-content is-add" @click="choose">
							<slot>
								<view class="icon-add"></view>
								<view class="icon-add rotate"></view>
							</slot>
						</view>
					</view>
				</view>
				<view style="height: 70px;margin-top: 5%;padding-bottom: 2%;">
					<button class="mini-btn " style="width: 50%; margin-left: 25%;" @click="save"
						type="primary">保存</button>
				</view>
			</uni-section>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view style="width:35vh;height:18vh;/">
				<button type="primary" style="width:15vh; margin-top:2vh;" @click="photo">拍照</button>
				<button type="primary" style="width:15vh; margin-top:1vh;" @click="album">相册</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import {
		tb,
		delTempFile
	} from '@/api/system/inspect'
	export default {
		data() {
			return {
				imageList: [],
				jobId: "",
				abnormalItemId: "",
			}
		},
		onLoad(parm) {
			let data = JSON.parse(parm.data);
			this.jobId = data.JOB_ID;
			this.abnormalItemId = data.ABNORMALID;
			console.log(this.jobId, this.abnormalItemId)
			this.look(this.abnormalItemId);
		},
		methods: {
			look(abnormalItemId) {
				tb(abnormalItemId).then(res => {
					console.log(res)
					if (res.code === 200) {
						for (var i = 0; i < res.data.length; i++) {
							this.imageList.push({
								img: res.data[i].fileUrl,
								type: 1,
								id: res.data[i].id
							})
						}
					}
				})
			},
			delFile(indexs) {
				var file = this.imageList;
				let that = this;
				uni.showModal({
					title: '提示：',
					content: '请确认是否要删除?',
					success: function(res) {
						if (res.confirm) {
							that.$modal.loading("删除中，请耐心等待...")
							if (file[indexs].type === 1) {
								delTempFile(file[indexs].id).then(res => {
									that.$modal.closeLoading();
									if(res.code===200){
										that.imageList = file.filter(function(value, index) {
											return index !== indexs; // 返回下标不为2的元素组成的新数组
										});
										that.$modal.msgSuccess("删除成功");
									}else{
										that.$modal.msgError("删除失败");
									}
								})
							} else {
								that.imageList = file.filter(function(value, index) {
									return index !== indexs; // 返回下标不为2的元素组成的新数组
								});
								that.$modal.closeLoading();
							}
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
				});
			},
			prviewImage(img, index) {
				let urls = []
				if (this.disablePreview) return
				this.imageList.forEach(i => {
					urls.push(i.img)
				})
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			choose() {
				this.$refs.popup.open();
			},
			photo() {
				this.$refs.popup.close();
				var camera = plus.camera.getCamera() // 获取camera对象
				var resolution = camera.supportedImageResolutions // 获取字符串数组，摄像头支持的摄像分辨率
				camera.captureImage((res) => {
					//console.log(res)
					this.imageList.push({
						img: res,
						type: 0
					})
					//console.log(this.imageList)
				}, (error) => {
					//console.log(error)
				}, {
					resolution: resolution[resolution.length - 1],
					format: "jpg"
				})
			},
			album() {
				var that = this;
				this.$refs.popup.close();
				uni.chooseImage({
					count: 1000, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths))
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							that.imageList.push({
								img: res.tempFilePaths[i],
								type: 0
							});
						}
					}
				});
			},
			save() {
				let files = [];
				const baseUrl = config.baseUrl;
				if (this.imageList.length > 0) {
					for (var i = 0; i < this.imageList.length; i++) {
						if (this.imageList[i].type === 0) {
							let path = this.imageList[i].img;
							let splitArray = path.split("/");
							let substring = splitArray[splitArray.length - 1];
							files.push({
								"name": substring,
								"uri": this.imageList[i].img,
							})
						}
					}
					if(files.length>0){
						this.$modal.loading("保存中，请耐心等待...")
						const uploadTask = uni.uploadFile({
							url: baseUrl + '/development/v9/fs/minio/uploadTempFiles', //仅为示例，非真实的接口地址
							files: files,
							header: {
								'Authorization': getToken()
							},
							formData: {
								application: "fankui_file",
								jobId: this.jobId,
								abnormalItemId: this.abnormalItemId,
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes)
								if (JSON.parse(uploadFileRes.data).code == 200) {
									this.$modal.closeLoading();
									this.$modal.msgSuccess("保存成功")
								} else {
									this.$modal.closeLoading();
									this.$modal.msgError("保存文件失败");
								}
							},
							fail: (uploadFileRes) => {
								this.$modal.closeLoading();
								this.$modal.msgError("保存失败");
							},
						});
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress);
						});
					}else{
						this.$modal.msgSuccess("保存成功")
					}
				}
			},
		}
	}
</script>

<style>
	.uni-file-picker {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		/* #endif */
		flex: 1;
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box {
		background-color: #fff;
		position: relative;
		// flex: 0 0 33.3%;
		width: 33.3%;
		height: 0;
		padding-top: 33.33%;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.textarea-a {
		border: 1px #eee solid;
		width: 90%;
		height: 100px;
		margin-left: 3%;
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box {
		position: relative;
		// flex: 0 0 33.3%;
		width: 32%;
		height: 0;
		padding-top: 33.33%;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.file-picker__box-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 4px;
		border: 1px #eee solid;
		border-radius: 5px;
		overflow: hidden;
	}

	.file-picker__progress {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		/* border: 1px red solid; */
		z-index: 2;
	}

	.file-picker__progress-item {
		width: 100%;
	}

	.file-picker__mask {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		color: #fff;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.file-image {
		width: 100%;
		height: 100%;
	}

	.is-add {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.icon-add {
		width: 50px;
		height: 5px;
		background-color: #f1f1f1;
		border-radius: 2px;
	}

	.rotate {
		position: absolute;
		transform: rotate(90deg);
	}

	.icon-del-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 3px;
		right: 3px;
		height: 26px;
		width: 26px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
		transform: rotate(-45deg);
	}

	.icon-del {
		width: 15px;
		height: 2px;
		background-color: #fff;
		border-radius: 2px;
	}
</style>